<template>
    <div class="page-container">
        <div class="header-container">
            <h1>数据概览</h1>
            <div class="current-date">{{ currentDate }}</div>
        </div>

        <!-- 统计数据卡片区域 -->
        <div class="stats-cards">
            <el-card shadow="hover" class="stats-card">
                <div class="stats-content">
                    <div class="stats-label">企业总数</div>
                    <div class="stats-value">{{ statisticsData.enterpriseTotal || 0 }}</div>
                </div>
            </el-card>

            <el-card shadow="hover" class="stats-card">
                <div class="stats-content">
                    <div class="stats-label">本月新企业数量</div>
                    <div class="stats-value">{{ statisticsData.newEnterpriseTotal || 0 }}</div>
                </div>
            </el-card>

            <el-card shadow="hover" class="stats-card">
                <div class="stats-content">
                    <div class="stats-label">本月上报数量</div>
                    <div class="stats-value">{{ statisticsData.currentReportCount || 0 }}</div>
                </div>
            </el-card>

            <el-card shadow="hover" class="stats-card">
                <div class="stats-content">
                    <div class="stats-label">本月建档总数</div>
                    <div class="stats-value">{{ statisticsData.constructionCount || 0 }}</div>
                </div>
            </el-card>

            <el-card shadow="hover" class="stats-card">
                <div class="stats-content">
                    <div class="stats-label">本月调查总数</div>
                    <div class="stats-value">{{ statisticsData.investigationCount || 0 }}</div>
                </div>
            </el-card>

            <el-card shadow="hover" class="stats-card">
                <div class="stats-content">
                    <div class="stats-label">本月岗位变化数</div>
                    <div class="stats-value">{{ statisticsData.positionChanges || 0 }}</div>
                </div>
            </el-card>
        </div>

        <!-- 图表区域 -->
        <div class="charts-container">
            <!-- 各地上报进度 -->
            <el-card shadow="hover" class="chart-card">
                <template #header>
                    <div class="card-header">
                        <span>本月各地市上报进度</span>
                    </div>
                </template>
                <div class="progress-chart">
                    <div v-for="item in progressData" :key="item.city" class="progress-item">
                        <div class="progress-info">
                            <span class="city-name">{{ item.city }}</span>
                            <span class="progress-value">{{ item.value }} / {{ item.total }}</span>
                        </div>
                        <el-progress
                            :percentage="parseFloat(item.percentage.toFixed(2))"
                            :color="getProgressColor(item.percentage)"
                            :stroke-width="24"
                            :text-inside="true"
                        />
                    </div>
                </div>
            </el-card>

            <!-- 企业分布图表 -->
            <div class="distribution-charts">
                <!-- 企业地区分布 -->
                <el-card shadow="hover" class="chart-card">
                    <template #header>
                        <div class="card-header">
                            <span>企业地区分布</span>
                            <span class="chart-subtitle">企业数量占比</span>
                        </div>
                    </template>
                    <div class="pie-chart">
                        <v-chart class="chart" :option="regionChartOption" autoresize />
                    </div>
                </el-card>

                <!-- 企业行业分布 -->
                <el-card shadow="hover" class="chart-card">
                    <template #header>
                        <div class="card-header">
                            <span>企业行业分布</span>
                            <span class="chart-subtitle">企业数量占比</span>
                        </div>
                    </template>
                    <div class="pie-chart">
                        <v-chart class="chart" :option="industryChartOption" autoresize />
                    </div>
                </el-card>

                <!-- 企业性质分布 -->
                <el-card shadow="hover" class="chart-card">
                    <template #header>
                        <div class="card-header">
                            <span>企业性质分布</span>
                            <span class="chart-subtitle">企业数量占比</span>
                        </div>
                    </template>
                    <div class="pie-chart">
                        <v-chart class="chart" :option="natureChartOption" autoresize />
                    </div>
                </el-card>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { PieChart } from 'echarts/charts';
import {
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    GridComponent,
} from 'echarts/components';
import VChart from 'vue-echarts';
import overviewApi from '../../api/overview';

// 路由实例
const router = useRouter();

// 注册ECharts组件
use([CanvasRenderer, PieChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent]);

// 统计数据
const statisticsData = ref({
    enterpriseTotal: 0,
    newEnterpriseTotal: 0,
    currentReportCount: 0,
    constructionCount: 0,
    investigationCount: 0,
    positionChanges: 0,
});

// 上报进度数据
const progressData = ref([]);

// 企业地区分布数据
const regionDistribution = ref([]);

// 企业地区分布图表配置
const regionChartOption = ref({
    tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} ({d}%)',
    },
    legend: {
        orient: 'vertical',
        right: '5%',
        top: '10%',
        bottom: '10%',
        type: 'scroll',
        textStyle: {
            color: '#6b7280',
            fontSize: 10,
        },
        itemWidth: 10,
        itemHeight: 10,
        pageButtonItemGap: 5,
        pageButtonGap: 3,
        pageIconSize: 8,
        pageButtonPosition: 'end',
    },
    series: [
        {
            name: '企业地区分布',
            type: 'pie',
            radius: ['35%', '75%'],
            center: ['35%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 8,
                borderColor: '#fff',
                borderWidth: 2,
            },
            label: {
                show: false,
                position: 'center',
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '16',
                    fontWeight: 'bold',
                },
            },
            labelLine: {
                show: false,
            },
            data: regionDistribution.value,
        },
    ],
});

// 企业行业分布数据
const industryDistribution = ref([]);

// 企业行业分布图表配置
const industryChartOption = ref({
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)',
    },
    legend: {
        orient: 'vertical',
        right: '5%',
        top: '10%',
        bottom: '10%',
        type: 'scroll',
        textStyle: {
            color: '#6b7280',
            fontSize: 10,
        },
        itemWidth: 10,
        itemHeight: 10,
        pageButtonItemGap: 5,
        pageButtonGap: 3,
        pageIconSize: 8,
        pageButtonPosition: 'end',
    },
    series: [
        {
            name: '企业行业分布',
            type: 'pie',
            radius: ['35%', '75%'],
            center: ['35%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 8,
                borderColor: '#fff',
                borderWidth: 2,
            },
            label: {
                show: false,
                position: 'center',
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '16',
                    fontWeight: 'bold',
                },
            },
            labelLine: {
                show: false,
            },
            data: industryDistribution.value,
        },
    ],
});

// 企业性质分布数据
const natureDistribution = ref([]);

// 企业性质分布图表配置
const natureChartOption = ref({
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)',
    },
    legend: {
        orient: 'vertical',
        right: '5%',
        top: '10%',
        bottom: '10%',
        type: 'scroll',
        textStyle: {
            color: '#6b7280',
            fontSize: 10,
        },
        itemWidth: 10,
        itemHeight: 10,
        pageButtonItemGap: 5,
        pageButtonGap: 3,
        pageIconSize: 8,
        pageButtonPosition: 'end',
    },
    series: [
        {
            name: '企业性质分布',
            type: 'pie',
            radius: ['35%', '75%'],
            center: ['35%', '50%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 8,
                borderColor: '#fff',
                borderWidth: 2,
            },
            label: {
                show: false,
                position: 'center',
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '16',
                    fontWeight: 'bold',
                },
            },
            labelLine: {
                show: false,
            },
            data: natureDistribution.value,
        },
    ],
});

// 当前日期
const currentDate = ref('');

// 格式化今天的日期
const formatDate = (date) => {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}年${month}月${day}日`;
};

// 获取进度条颜色
const getProgressColor = (percentage) => {
    const value = parseFloat(percentage);
    if (value >= 90) return '#10b981';
    if (value >= 70) return '#3b82f6';
    if (value >= 50) return '#f59e0b';
    return '#ef4444';
};

// 加载数据
const loadData = async () => {
    try {
        // 这里可以调用API获取真实数据
        const statsRes = await overviewApi.getStatisticsData();
        statisticsData.value = statsRes.data;
        progressData.value = statsRes.data.progressDataList;

        // 更新数据并同步更新饼图配置
        regionDistribution.value = statsRes.data.regionDistributionDataList || [];
        regionChartOption.value.series[0].data = regionDistribution.value;

        industryDistribution.value = statsRes.data.industryDistributionDataList || [];
        industryChartOption.value.series[0].data = industryDistribution.value;

        natureDistribution.value = statsRes.data.natureDistributionDataList || [];
        natureChartOption.value.series[0].data = natureDistribution.value;
    } catch (error) {
        console.error('加载数据失败:', error);
    }
};

// 组件挂载时加载数据
onMounted(() => {
    loadData();
    currentDate.value = formatDate(new Date());
});
</script>

<style scoped>
.page-container .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    color: white;
}

.header-container div {
    font-size: 24px;
    font-weight: 500;
    color: #1f2937;
    margin: 0;
}

.page-container .current-date {
    font-size: 16px;
    color: #6b7280;
}

/* 统计卡片样式 */
.stats-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

.stats-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.stats-content {
    padding: 20px;
}

.stats-label {
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 10px;
}

.stats-value {
    color: #1f2937;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 10px;
}

.stats-change {
    display: flex;
    align-items: center;
    gap: 5px;
}

.change-icon {
    font-size: 16px;
}

.increase {
    color: #10b981;
}

.decrease {
    color: #ef4444;
}

.change-text {
    font-size: 14px;
    color: #1f2937;
}

.change-label {
    font-size: 12px;
    color: #6b7280;
}

/* 图表容器样式 */
.charts-container {
    margin-bottom: 20px;
}

.chart-card {
    margin-bottom: 20px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
}

/* 进度图表样式 */
.progress-chart {
    padding: 20px;
}

.progress-item {
    margin-bottom: 20px;
}

.progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.city-name {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
}

.progress-value {
    font-size: 14px;
    color: #6b7280;
}

/* 分布图表样式 */
.distribution-charts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.pie-chart {
    position: relative;
    min-height: 450px;
    height: auto;
    overflow: visible;
}

.chart {
    width: 100%;
    min-height: 450px;
    height: auto;
    padding: 20px 0;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .stats-cards {
        grid-template-columns: repeat(2, 1fr);
    }

    .distribution-charts {
        grid-template-columns: repeat(2, 1fr);
    }

    .chart {
        min-height: 350px;
    }
}

@media (max-width: 768px) {
    .stats-cards {
        grid-template-columns: 1fr;
    }

    .distribution-charts {
        grid-template-columns: 1fr;
    }

    .chart {
        min-height: 450px;
    }

    /* 在小屏幕上调整图表卡片样式 */
    .chart-card {
        padding: 10px;
    }

    /* 确保容器有足够空间显示图例和图表 */
    .pie-chart {
        overflow: visible;
    }
}
</style>
